<template>
    <el-drawer v-model="drawer" title="操作记录" :draggable="true" :resizable="true">
        <h3 class="text-gray text-14">只记录成功的操作</h3>
        <!-- <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="date" label="操作时间" />
            <el-table-column prop="name" label="操作内容" />
            <el-table-column prop="address" label="操作人" />
        </el-table>
        <pagination :total="total" v-model:page="pageData.pageNum" v-model:limit="pageData.pageSize"
            @pagination="getList" /> -->
        <vxe-table border :loading="loading" :data="tableData">
            <!-- <vxe-column type="seq" width="70"></vxe-column> -->
            <vxe-column field="date" title="操作时间"></vxe-column>
            <vxe-column field="address" title="操作内容"></vxe-column>
            <vxe-column field="name" title="操作人"></vxe-column>
        </vxe-table>
        <vxe-pager v-model:currentPage="pageData.pageNum" v-model:pageSize="pageData.pageSize" :total="pageData.total"
            @page-change="pageChange">
        </vxe-pager>
    </el-drawer>
</template>

<script setup >
import { ref, watch } from 'vue'
watch(() => props.fetchParams, async (newVal, oldVal) => {
    if (newVal !== oldVal) {
        await show()
    }
})
const props = defineProps({
    title: {
        type: String,
        default: '操作记录'
    },
    url: {
        type: String,
        default: ''
    },
    fetchParams: {
        type: Object,
        default: () => ({})
    }
})
const tableData = ref([])
const drawer = ref(false)
/** 显示抽屉 */
const show = async () => {
    tableData.value = [
        {
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
        },
        {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
        },
        {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
        }
    ]
    drawer.value = true;
    return
    getList()
}
const loading = ref(false)
const pageData = reactive({
    pageNum: 1,
    pageSize: 10,
    total: 0
})
const getList = async () => {
    if (props.url) {
        loading.value = true
        const res = await getOperationRecord(props.url, props.params);
        if (res.code === 200) {
            loading.value = false
            tableData.value = res.data || []
        }
    }
}
const pageChange = (pageNum, pageSize) => {
    pageData.pageNum = pageNum
    pageData.pageSize = pageSize
    getList()
}
defineExpose({
    show,
});
</script>

<style scoped></style>